<template>
	<div id="app">
		<!-- banner -->
		<div class="ban"  :style="'height:338px;background-image: url('+banImg+');background-size:cover;'">
		    <div class="txt" style="padding-top:99px;">
		        <div class="wp">
		            <h3>招聘人才</h3>
		            <div class="desc">
		                <p>在GAME UI发现最优秀的设计师资源</p>
		            </div>
		            <a @click="toPublishJob">发布职位</a>
		        </div>
		    </div>
		</div>
		<!-- banner -->
		<!-- 内容 -->
		<div class="main">
		    <div class="wp">
		        <div class="g-boxq2">
		            <div class="m-topl">
		                <ul class="ul-listl3 ls">
		                    <li>
		                        <a @click="toHome" class="con">首页</a>
		                    </li>
		                    <li class="on">
		                        <a class="con">我的职位</a>
		                    </li>
		                    <li>
		                        <a @click="toPublishJob" class="con">发布职位</a>
		                    </li>
		                    <li>
		                        <a @click="toPublishEpiboly" class="con">项目外包</a>
		                    </li>
		                </ul>
		            </div>
		            <ul class="ul-txtq4">
		                <li v-for="(item,i) in jobList" :key="i"  @click="detailsShow(item.id)">
		                    <div class="con">
		                        <h3><a>{{item.title}}</a><em>{{item.salary}}</em></h3>
		                        <div class="info">
		                            <span><img src="../../assets/images/iconq43.png" alt=""> {{item.province}} | {{item.city}}</span>
		                            <span><img src="../../assets/images/iconq44.png" alt="">{{item.jobNature}}</span>
		                            <span><img src="../../assets/images/iconq45.png" alt=""> {{getTime(item.createTime)}}</span>
		                        </div>
								<div  @click.stop>
									<el-dropdown class="set">
										<span class="el-dropdown-link">
											<i></i>
										</span>
										<el-dropdown-menu slot="dropdown" class="muneView" style="width: ;">
											<el-dropdown-item @click.native="editJob(item.id)">编辑职位</el-dropdown-item>
											<el-dropdown-item @click.native="deleteJob(item.id)">删除职位</el-dropdown-item>
										</el-dropdown-menu>
									</el-dropdown>
								</div>
		                        <!-- <div class="set" @click="deleteJob(item.id)" @mouseover="mousInt(index)" @mouseout="mouseOut(index)">
		                            <i></i>
		                            <dl style="display: block;" v-show="showList && selectIndex == index">
		                                <dd><a>编辑职位</a></dd>
		                                <dd><a>删除职位</a></dd>
		                            </dl>
		                        </div> -->
								
		                    </div>
		                </li>
		            </ul>
					<div class="li-no-content" v-if="jobList.length==0">
						<img src="../../assets/images/no_content.png" alt="">
						<span>这里没有任何东西喔</span>
					</div>
		            <!-- 页码 -->
		            <div class="pages qm" v-if="jobList.length>0">
		            	<el-pagination
		            	  background
		            	   @size-change="changeSizeHandle" @current-change="currentChangeHandle"
		            	        :current-page="currentPage" :page-size="jobListParam.pageSize"
		            	  layout="prev,pager,next"
		            	  :total="total">
		            	</el-pagination>
					</div>
		        </div>
		    </div>
			<!-- 弹窗 -->
			<!-- <div class="m-pop" id="m-win" style="display: block;" v-if="showDetails">
			    <div class="pop-bg"></div>
			    <div class="inner qm2">
			        <a @click="detailsCancle()" class="close"></a>
			        <div class="m-mess">
			            <div class="col-r">
			                <div class="top">
			                    <div class="pic"><img src="../../assets/images/picq63.jpg" alt="" /></div>
			                    <div class="txt">
			                        <h3>{{jobDetails.companyName}}</h3>
			                        <div class="desc">
			                            <p>行业：{{jobDetails.jobType}}</p>
			                            <p>官网：{{jobDetails.companyUrl}}</p>
			                        </div>
			                    </div>
			                </div>
			                <div class="pos">
			                    <h2>其他职位</h2>
			                    <dl>
			                        <dd v-for="(item,i) in list" :key="i">
			                            <h3><a>{{item.title}}</a></h3>
			                            <span>{{item.province}} | {{item.city}}，{{item.jobType}}</span>
			                        </dd>
			                    </dl>
			                    <a class="all" @click="detailsCancle()">全部职位</a>
			                </div>
			            </div>
			            <div class="col-l">
			                <div class="cont">
			                    <div class="tp bdsharebuttonbox">
			                        <a  class="bds_more" data-cmd="more">分享到<i></i></a>
			                        <h3>{{jobDetails.title}}<em>{{jobDetails.salary}}</em></h3>
			                    </div>
			                    <div class="info">
			                        <span style="background-image: url(images/iconq43.png);"><img src="../../assets/images/iconq43.png" alt="" />{{jobDetails.province}} | {{jobDetails.city}}</span>
			                        <span style="background-image: url(images/iconq44.png);"><img src="../../assets/images/iconq44.png" alt="" />{{jobDetails.jobNature}}</span>
			                        <span style="background-image: url(images/iconq45.png);"><img src="../../assets/images/iconq45.png" alt="" />{{jobDetails.createTime}}</span>
			                    </div>
			                    <div class="box">
			                        <div class="item">
			                            <h3>职位描述 </h3>
			                            <div class="desc">
											{{jobDetails.jobDescription}}
			                            </div>
			                        </div>
			                        <div class="item">
			                            <h3>职位要求 </h3>
			                            <div class="desc">
											{{jobDetails.skillDescription}}
			                            </div>
			                        </div>
			                    </div>
			                    <div class="bot">
			                        <p><span>请发送简历至：<a>{{jobDetails.companyEmail}}</a></span></p>
			                        <p>邮件标题格式为：应聘 + 职位名称 + 来源GAMEUI</p>
			                    </div>
			                </div>
			            </div>
			        </div>
			    </div>
			</div> -->
		</div>
		<!-- 内容 -->

		<!-- 弹窗 -->
		    <div class="m-pop" id="m-win" style="display: block;" v-show="showDetails">
		        <div class="pop-bg"></div>
		        <div class="inner qm2">
		            <a @click="detailsCancle()" class="close"></a>
		            <div class="m-mess">
		                <div class="col-r">
		                    <div class="top">
		                        <div class="pic">
									<img v-if="jobDetails.member == null" src="../../assets/images/picq63.jpg" alt="" />
									<img v-else :src="jobDetails.member.avatar" alt="" />
								</div>
		                        <div class="txt">
		                            <h3>{{jobDetails.companyName}}</h3>
		                            <div class="desc">
		                                <p>行业：{{jobDetails.jobType}}</p>
		                                <p>官网：<a :href="jobDetails.companyUrl" target="_blank">{{jobDetails.companyUrl}}</a></p>
		                            </div>
		                        </div>
		                    </div>
		                    <div class="pos">
		                        <h2>其他职位</h2>
		                        <dl>
		                            <dd v-for="(item,i) in list" :key="i">
		                                <h3><a>{{item.title}}</a></h3>
		                                <span v-if="item.province">{{item.province}} | {{item.city}}，{{item.jobNature}}</span>
		                            </dd>
		                        </dl>
		                        <a class="all" @click="allJob(jobDetails.companyName)">全部职位</a>
		                    </div>
		                </div>
		                <div class="col-l">
		                    <div class="cont">
		                        <div class="tp bdsharebuttonbox">
		                            <a class="bds_more" data-cmd="more">分享到<i></i></a>
		                            <h3>{{jobDetails.title}}<em>{{jobDetails.salary}}</em></h3>
		                        </div>
		                        <div class="info j-small-info">
		                            <span class="addr" v-if="jobDetails.province">{{jobDetails.province}} {{jobDetails.city?'| '+jobDetails.city:''}} {{jobDetails.area?'| '+jobDetails.area:''}}</span>
		                            <span class="j-type" v-if="jobDetails.jobNature">{{jobDetails.jobNature}}</span>
		                            <span class="j-time" v-if="jobDetails.createTime">{{getTime(jobDetails.createTime)}}</span>
		                        </div>
		                        <div class="box">
		                            <div class="item">
		                                <h3>职位描述 </h3>
		                                <div class="desc" v-html="jobDetails.jobDescription">
											<!-- {{jobDetails.jobDescription}} -->
		                                    <!-- <p>1、负责网易云音乐市场推广视觉项目，能够独立承担重点设计项目，主导整体视觉风格和创意设计方案并能够提供合理可行的解决方案并执行呈现；</p>
		                                    <p>2、熟悉市场推广视觉业务，基于对产品业务以及用户的了解，参与营销策划的创意和构思，有清晰的创意思路；</p>
		                                    <p>3、有一定的品牌sense，基于品牌业务的了解输出视觉驱动型创意方案；</p>
		                                    <p>4、分享设计经验、推动提高团队的设计能力。</p> -->
		                                </div>
		                            </div>
		                            <div class="item">
		                                <h3>职位要求 </h3>
		                                <div class="desc" v-html="jobDetails.skillDescription">
											<!-- {{jobDetails.skillDescription}} -->
		                                    <!-- <p>1、设计类专业本科及以上学历，3年以上互联网视觉设计经验；</p>
		                                    <p>2、熟练掌握PS、AI、C4D等设计呈现的软件，对设计定位、风格定义、规范执行有较深的理解；</p>
		                                    <p>3、热爱音乐了解音乐用户，出色的视觉表现能力，较高的审美和创新能力、良好的业务理解力以及视觉思维判断力，有优秀市场向落地项目经验者加分；</p>
		                                    <p>4、有较高的综合素质、逻辑清晰、善于沟通、工作兼容度高，有极强的责任心；</p>
		                                    <p>5、简历需附带个人近期作品或链接</p> -->
		                                </div>
		                            </div>
		                        </div>
		                        <div class="bot">
		                            <p><span>请发送简历至：<a :href="'mailto:'+jobDetails.companyEmail">{{jobDetails.companyEmail}}</a></span></p>
		                            <p>邮件标题格式为：应聘 + 职位名称 + 来源GAMEUI</p>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
	</div>
</template>

<script>
	import common from '../../../static/utils/common.js';
	import API from '../../../static/utils/API.js';
	import layer from "layui-layer";
	
	import { parseTime } from "../../../static/utils/formatdate.js";
	export default{
		components:{
			layer
		},
		data() {
			return {
				banImg:require('../../assets/images/banq1.jpg'),
				jobListParam: {
					pageNum: 1,
					pageSize: 10
				},
				jobList: [],
				total: 0,             // 总条数，根据接口获取数据长度(注意：这里不能为空)
				currentPage: 1  ,
				jobDeleteParam: {
					id:''
				},
				selectIndex:0,
				showList:false,
				showDetails:false,
				jobDetailsParam:{
					
				},
				jobDetails:{
					
				},
				listParam: {
					pageNum: 1,
					pageSize: 4
				},
				list:[]
			}
		},
		mounted() {
			this.getJobList()
	    },
		methods: {
			getTime(time){
				 return parseTime(time,"{y}-{m}-{d}")
			},
			detailsShow:function (jobId) {
				
				this.jobDetailsParam.id = jobId
				var that =  this
				common.requestGet(API.jobDetails,this.jobDetailsParam,function(result){
					that.showDetails = true
					
					that.jobDetails = result.data
					that.listParam.companyName = that.jobDetails.companyName
					common.requestPost(API.jobList,that.listParam,function(result){
						
						that.list = result.data
					})
				})
				this.showDetails = true
			},
			detailsCancle:function () {
				this.showDetails = false
			},
			editJob: function (jobId) {
				this.$router.push({
					path:"/publishJob/"+jobId
				})
			},
			deleteJob: function(jobId){
				this.jobDeleteParam.id = jobId
				var that =  this
				layer.msg('你确定删除该职位吗？', {
				  time: 0,mask:1
				  ,btn: ['确定', '取消']
				  ,yes: function(index){
				    layer.close(index);
				    common.requestPost(API.jobDelete,that.jobDeleteParam,function(result){
						
				    	layer.msg(result.msg)
				    	that.getJobList()
				    })
				  }
				});
			},
			toHome: function(){
				this.$router.push("/recruitHome");
			},
			toJob: function(){
				this.$router.push("/job");
			},
			toPublishJob: function(){
				this.$router.push("/publishJob");
			},
			
			toPublishEpiboly: function(){
				this.$router.push("/publishEpiboly");
			},
			mousInt:function(index){
				this.selectIndex = index
				this.showList = true
			},
			mouseOut:function(index){
				this.selectIndex = index
				this.showList = false
			},
			// 每页显示的条数改变
			 changeSizeHandle(val) {
				 this.jobListParam.pageSize = val                   // 改变每页显示的条数 
				 this.jobListParam.pageNum = 1              // 注意：在改变每页显示的条数时，要将页码显示到第一页
				 this.currentPage = 1
				 this.getJobList()                    // 点击每页显示的条数时，显示第一页
				 
			 },
			 // current-change用于监听页数改变，而内容也发生改变
			 currentChangeHandle(val) {
				 $('body,html').animate({
					'scrollTop':0
				}, 0);
				 this.jobListParam.pageNum = val                // 改变默认的页数
				 this.currentPage = val 
				 this.getJobList()                        // 切换页码时，要获取每页显示的条数
				 
			 },
			getJobList: function () {
				var that =  this
				common.requestPost(API.jobMemberList,this.jobListParam,function(result){
					
					if(result.code == 0){
						that.jobList = result.data
						that.total = result.total
					}
				})
			},
		}
	}
</script>

<style scoped>
.m-mess .top .pic img{
	height:100% !important;
}

.m-mess .top .txt h3{
	text-align: center;
}

.ul-txtq4 .info span:first-child{
	width:30%;
}
.ul-txtq4 h3 a{
	width:25%;
}


.ul-txtq4 h3{
	display: flex;
}




























</style>
